<template>
  <div class="flex flex-row justify-start m-4">

    <div class="phone">
      <!-- <div class="camera"></div> -->
      <div class="speaker"></div>
      <div v-loading="selectLoading" class="screen flex flex-col justify-end">
        <div class="tabDiv h-14 max-h-14 min-h-14 flex flex-row items-center justify-around bg-[#e5e5e5]">
          <div v-for="(item, index) in tabBarList" :key="item.id" :class="['w-full flex flex-col items-center cursor-pointer select-none',
            '',
            currentPage?.id == item.id ? 'border-2 border-l-2 border-r-2 border-green-800 border-dashed' : ''
          ]" @click="chooseTabBar(item)">
            <div>
              <el-image :class="['w-6', 'h-6']" :src="currentPage?.id == item.id ? item.activeImage : item.image"></el-image>
            </div>
            <div>{{ item.text }}</div>
          </div>
        </div>
      </div>
      <div class="home-button"></div>
    </div>


    <el-card class="ml-4 mt-2">
      <div v-loading="selectLoading" class=" flex flex-col justify-start items-start">
        <div>
          <el-button @click="reset">重置</el-button>
          <el-button type="primary" @click="save" v-permission="permissionList.appTabBarSave">保存</el-button>
        </div>
        <div class="mt-4 flex flex-row justify-start items-center">
          <span class="w-24 required">路径: </span>
          <div class="ml-4">
            <el-input class="w-60" v-model="currentPage.path"></el-input>
          </div>
        </div>
        <div class="mt-4 flex flex-row justify-start items-center">
          <span class="w-24 required">图标:</span>
          <div class="ml-4">
            <el-image class="w-16 h-16" :src="currentPage.image"></el-image>
          </div>
          <div class="ml-2 self-end">
            <el-input class="ml-4" v-model="currentPage.image"></el-input>
            <QiniuUpload @getUrl="(url: string) => { currentPage.image = url }">
              <el-button size="small" type="default" class="ml-4 mt-2">上传图标<el-icon class="el-icon--right">
                  <Upload />
                </el-icon></el-button>
            </QiniuUpload>
          </div>
        </div>
        <div class="mt-4 flex flex-row justify-start items-center">
          <span class="w-24 required">图标(激活):</span>
          <div class="ml-4">
            <el-image class="w-16 h-16" :src="currentPage.activeImage"></el-image>
          </div>
          <div class="ml-2 self-end">
            <el-input class="ml-4" v-model="currentPage.activeImage"></el-input>
            <QiniuUpload @getUrl="(url: string) => { currentPage.activeImage = url }">
              <el-button size="small" type="default" class="ml-4 mt-2">上传图标<el-icon class="el-icon--right">
                  <Upload />
                </el-icon></el-button>
            </QiniuUpload>
          </div>
        </div>
        <div class="mt-4 flex flex-row justify-start items-center">
          <span class="w-24 required">文本: </span>
          <div class="ml-4">
            <el-input class="w-60" v-model="currentPage.text"></el-input>
          </div>
        </div>
        <!-- <div class="mt-4 flex flex-row justify-start items-center">
        <span class="w-24 required">状态: </span>
        <div class="ml-4">
          <el-switch v-model="currentPage.status"></el-switch>
        </div>
      </div> -->
        <div class="mt-8 flex flex-row justify-start items-center">
          <el-button type="default" v-permission="permissionList.appTabBarMove" @click="moveLeft">向左移动</el-button>
          <el-button type="default" v-permission="permissionList.appTabBarMove" @click="moveRight">向右移动</el-button>
          <el-button type="primary" v-permission="permissionList.appTabBarAdd" @click="add">新增</el-button>
          <el-button v-if="currentPage.type == TabBarType.default" type="warning" v-permission="permissionList.appTabBarDisabled" @click="moveDisable">禁用</el-button>
          <el-button v-if="currentPage.type == TabBarType.disable" type="success" v-permission="permissionList.appTabBarEnabled" @click="moveEable">启用</el-button>
          <el-button v-if="currentPage.type == TabBarType.disable" v-permission="permissionList.appTabBarDelete"
            type="danger" @click="remove">删除</el-button>
        </div>
      </div>
    </el-card>

  </div>

  <el-card class="m-4 p-0">
    <div>禁用:</div>
    <el-scrollbar ref="disableScrollRef" class="w-full min-w-full bg-[#e5e5e5] ">
      <div v-loading="selectLoading" ref="disableScrollDivRef"
        class="w-[700px] min-w-[700px] h-14 max-h-16 min-h-16 flex flex-row items-center justify-start bg-[#e5e5e5]">
        <div v-for="(item, index) in disableTabBarList" :key="item.id" :class="['w-20 min-w-20 flex flex-col items-center cursor-pointer select-none',
          '',
          currentPage?.id == item.id ? 'border-2 border-green-800 border-dashed' : ''
        ]" @click="chooseTabBar(item)">
          <div>
            <el-image :class="['w-6', 'h-6']" :src="currentPage?.id == item.id ? item.activeImage : item.image"></el-image>
          </div>
          <div>{{ item.text }}</div>
        </div>
      </div>
    </el-scrollbar>
  </el-card>

</template>

<script setup lang="ts" name="KeyValue">
import { useTabBarConfigHooks } from "./TabBarConfigHooks"
import QiniuUpload from "@/components/utils/QiniuUpload.vue";
import { permissionList } from "@/config/PermissionConfig"

let {
  tabBarList,
  currentPage,
  chooseTabBar,
  reset,
  save,
  selectLoading,
  add,
  remove,
  moveLeft,
  moveRight,
  disableTabBarList,
  moveDisable,
  moveEable,
  TabBarType,
} = useTabBarConfigHooks();

</script>

<style scoped>
.tabDiv {
  box-shadow: inset 0 0 10px rgba(50, 48, 48, 0.5);
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.tabContent {
  @apply w-full flex flex-col items-center;

}

/* 手机外壳样式 */
.phone {
  width: 350px;
  min-width: 350px;
  height: 650px;
  background-color: #fff;
  border: 10px solid #e0e0e0;
  /* 给外壳添加一个边框，模拟更真实的效果 */
  border-radius: 40px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  position: relative;
  padding: 20px;
}

/* 摄像头样式 */
.camera {
  width: 25px;
  height: 25px;
  background-color: #222;
  border-radius: 50%;
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
  /* 添加内阴影，让摄像头更立体 */
}

/* 扬声器样式 */
.speaker {
  width: 70px;
  height: 8px;
  background-color: #e0e0e0;
  border-radius: 4px;
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
}

/* 屏幕样式 */
.screen {
  width: 100%;
  height: 80%;
  background-color: #FFF;
  border-radius: 20px;
  margin-top: 40px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
  /* 给屏幕添加内阴影，让屏幕更有层次感 */
}

/* 主页按钮样式 */
.home-button {
  width: 50px;
  height: 50px;
  background-color: #fff;
  border: 2px solid #e0e0e0;
  border-radius: 50%;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
</style>
